<template>
  <div class="box">
    <a-descriptions layout="horizontal" title="项目信息">
      <a-descriptions-item label="名称">
        {{ info.Title || "" }}
      </a-descriptions-item>
      <a-descriptions-item label="合同总价">
        {{ info.TotalPrice || "" }}
      </a-descriptions-item>
      <a-descriptions-item label="状态">
        <a-tag
          v-if="info.Status"
          :color="['volcano', 'green', 'geekblue'][info.Status]"
        >
          {{ status[info.Status] }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="开始时间">
        {{ info.StartDate || "" }}
      </a-descriptions-item>
      <a-descriptions-item label="结束时间" span="2">
        {{ info.EndDate || "" }}
      </a-descriptions-item>
      <a-descriptions-item label="机构">
        {{ info.Organization || "" }}
      </a-descriptions-item>
      <a-descriptions-item label="机构地址" span="2">
        {{ info.Address || "" }}
      </a-descriptions-item>
      <a-descriptions-item label="联系人">
        {{ info.Contacter || "" }}
      </a-descriptions-item>
      <a-descriptions-item label="联系人电话">
        {{ info.Tel || "" }}
      </a-descriptions-item>
    </a-descriptions>
    <a-divider />
    <a-descriptions title="相关文件">
      <a-descriptions-item>
        <template
          :v-if="info.Attachments"
          v-for="(item, i) in info.Attachments"
        >
          <span
            :key="`file${i}`"
            :style="{
              margin: '2px 5px',
            }"
          >
            {{ item.FileName }} <a title="删除"><a-icon type="delete"/></a>
          </span>
        </template>
      </a-descriptions-item>
    </a-descriptions>
    <a-divider />
    <a-descriptions title="项目干系人">
      <a-descriptions-item>
        <template :v-if="info.Users" v-for="(user, i) in info.Users">
          <a
            :key="`user${i}`"
            :style="{
              margin: '2px 5px',
              color: user.role === 'manager' ? 'red' : null,
            }"
            :title="user.role === 'manager' ? '管理' : '成员'"
          >
            <a-icon type="user" />{{ user.name }}
          </a>
        </template>
      </a-descriptions-item>
    </a-descriptions>
    <a-divider />
    <div class="ant-descriptions-title">过程资产</div>
    <a-tabs default-active-key="1">
      <a-tab-pane key="1" tab="费用支出">
        <a-list :data-source="info.Payments" item-layout="horizontal">
          <a-list-item slot="renderItem" slot-scope="item">
            <a slot="actions"><a-icon type="check-circle" />同意 </a>
            <a slot="actions"><a-icon type="bug" />驳回 </a>
            <a-list-item-meta :description="item.Msg">
              <a slot="title">
                <a-statistic
                  :value="item.Expense"
                  :value-style="{ color: '#f60', display: 'inline' }"
                >
                  <template #prefix>
                    ￥
                  </template>
                </a-statistic>
                <a><a-icon type="user" />{{ item.User.name }} </a>
                <span class="time">{{ item.Time }}</span>
              </a>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-tab-pane>
      <a-tab-pane key="2" tab="实施参数">
        <div :style="{ textAlign: 'right' }">
          <a-button icon="plus" type="link">添加</a-button>
        </div>
        <a-list :data-source="info.Parametrics">
          <a-list-item slot="renderItem" slot-scope="item">
            <template slot="actions">
              <a><a-icon type="edit" />编辑 </a>
              <a><a-icon type="delete" />删除 </a>
            </template>
            <a-list-item-meta :description="item.Value">
              <a slot="title">
                <span>
                  {{ item.Key }}
                </span>
              </a>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-tab-pane>
      <a-tab-pane key="3" tab="工作报告">
        <div :style="{ textAlign: 'right' }">
          <a-button icon="plus" type="link">添加</a-button>
        </div>
        <a-list :data-source="info.Reports">
          <a-list-item slot="renderItem" slot-scope="item">
            <a-list-item-meta :description="item.Content">
              <a slot="title">
                <p>
                  <a><a-icon type="user" />{{ item.User.name }} </a>
                  <span class="time">{{ item.Time }}</span>
                </p>
                <h3>{{ item.Title }}</h3>
              </a>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {},
      status: {
        0: "未开始",
        1: "进行中",
        2: "已完结",
      },
    };
  },
  mounted() {
    // 获取传参
    const { id } = this.$route.query;
    // 根据参数获取项目详情
    this.$myaxios.get(`/project`, { params: { id } }).then((response) => {
      const { success, data, msg } = response.data;
      if (success) {
        this.info = data;
      } else {
        this.$message.error(msg);
      }
    });
  },
  methods: {},
  components: {},
};
</script>

<style lang="less" scoped>
.box {
  padding: 20px 10%;
  min-height: 100%;
  background-color: white;

  .time {
    color: gray;
    margin-left: 10px;
  }
}
</style>
